<template>
  <div class="modify_page">
    <el-scrollbar class="el_scroll">
      <div class="list_box">
        <el-timeline>
          <el-timeline-item v-for="(item, index) in modifyInfoList" :key="index" :timestamp="item.changeTime">
            {{item.remark}}
          </el-timeline-item>
        </el-timeline>
      </div>
    </el-scrollbar>
  </div>
</template>
<script>
export default {
  name: "ModifyInfo",
  props: {
    userInfo: {
      type: Object,
      default: function () {
        return {};
      },
    },
  },
  watch: {
    userInfo: {
      handler: function (e) {
        console.log(e);
        if (e.modifyInfoList) {
          this.modifyInfoList = e.modifyInfoList;
        }
      },
      immediate: true,
    },
  },
  data() {
    return {
      modifyInfoList: [],
    };
  },
  mounted() {},
  methods: {},
};
</script>
<style lang="scss">
.el_scroll {
  .el-scrollbar__wrap {
    max-height: 60vh;
    overflow-x: hidden;
  }
}
</style>
<style lang="scss" scoped>
.list_box {
  padding: 10px 0;
}
.modify_page {
  min-height: 360px;
}
</style>